<template>
	<view class="flex-col page">

		<view class="mt-22 flex-col section">
			<u--form labelPosition="left" labelAlign="right" :model="formData" :rules="rules" ref="uForm"
				labelWidth="80">
				<!-- 				<u-form-item label="类型:" prop="name" borderBottom ref="item1">
					<view class="flex-row items-center">
						<view class="flag" :class="formData.name=='住址'?'active':''" @click="setFlag('住址')">住址</view>
						<view class="flag" :class="formData.name=='公司'?'active':''" @click="setFlag('公司')">公司</view>


					</view>

				</u-form-item> -->
				<u-form-item label="收件人:" prop="contact" borderBottom ref="item2">
					<u-input v-model="formData.contact" border="bottom" placeholder="请输入收件人姓名" />
				</u-form-item>
				<u-form-item label="手机号码:" prop="phone" borderBottom ref="item3">
					<u-input v-model="formData.phone" border="bottom" placeholder="请输入收件人手机号码" />
				</u-form-item>
				<u-form-item label="所在地:" prop="district" borderBottom ref="item4" @click="showCityPicker=true">
					{{formData.district||'请选择地区'}}
				</u-form-item>
				<u-form-item label="详细地址:" prop="address" ref="item4">
					<view style="background-color: #f2f2f2;border: 1px;">
						<u--textarea v-model="formData.address" autoHeight placeholder="请输入详细的地址具体到门牌号"
							border="bottom"></u--textarea>
					</view>



				</u-form-item>
				<u-form-item label="智能识别" ref="item5">
					<view>
						<textarea class="input"
							style="height: 150rpx;border: 1px;background-color: #f2f2f2;width: 65vw; padding: 5px;"
							v-model.trim="autoAddressText" placeholder="请粘贴或输入地址,可智能识别"
							placeholder-class="placeholder"></textarea>

						<button @click="smart()" type="primary" size="mini"
							style="line-height: 26px; height: 26px;">智能识别</button>
					</view>
					<view>
						<u-icon name="/static/icons/wechat.png" label="获取微信收货地址" label-color="#00baad"
							@click="getWxAddress"></u-icon>
					</view>
				</u-form-item>

				<u-form-item label="默认地址:" prop="name" ref="item6">
					<view class="flex-row items-center">
						<text style="padding: 5px;">
							否
						</text>
						<u-switch v-model="formData.asDefault" activeColor="#f56c6c"></u-switch>
						<text style="padding: 5px;" :style="formData.asDefault?'color:#f56c6c':''">
							是
						</text>
					</view>
				</u-form-item>
			</u--form>
			<button type="primary" class="text-wrapper_2" :disabled="submited" @click="save">保存地址</button>
			<u-picker :show="showCityPicker" ref="cityPicker" @cancel="showCityPicker=false" :loading="loading"
				:columns="columns" @change="changeHandler" @confirm="cityConfirm"></u-picker>
		</view>
	</view>
</template>

<script>
	import Utils from '@/common/Utils.js'
	import Region from './ChinaCitys.json'
	import {
		AddressParse
	} from './addressParseBundle.js'
	export default {
		components: {},
		props: {},
		data() {
			return {
				formData: {
					name: ""
				},
				submited: "",
				loading: false,
				showCityPicker: false,
				value1: "",
				rules: {
					'contact': {
						type: 'string',
						required: true,
						message: '请填写收件人姓名',
						trigger: ['blur', 'change']
					},
					'phone': {
						type: 'string',
						required: true,
						message: '请填写手机号码',
						trigger: ['blur', 'change']
					},
					'district': {
						type: 'string',
						required: true,
						message: '请选择地区',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
				},
				dataList: ['请选择'],
				currentIndex: 0,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],

				indicatorStyleLeft: 16,
				action: "",
				AllRegion: [],
				autoAddressText: "",
				isEdit: false,
			};
		},
		onLoad(options) {
			if (options.id) {
				this.isEdit = true;
				this.getAddressDetails(options.id)
			} else {
				this.isEdit = false;
			}
			this.getArea();
		},

		methods: {
			getAddressDetails(id) {
				this.$get({
					url: `${this.$Utils.ApiUrl}/recipients/${id}`,
					data: {

					}
				}).then(res => {
					this.formData = res;
					console.log(res)
				})
			},
			save() {
				if (this.submited) {
					return;
				}
				this.$refs.uForm.validate().then(res => {
					if (!this.isEdit) {
						this.doCreate();
					} else {
						this.doUpdate();
					}
				}).catch(errors => {
					this.submited = false;
					console.log(errors)
					uni.$u.toast(errors[0].message)
				})

			},
			doCreate() {
				this.$post({
					url: `${this.$Utils.ApiUrl}/recipients`,
					data: this.formData,
				}).then(res => {
					uni.navigateBack();
				});
			},
			doUpdate() {
				this.$put({
					url: `${this.$Utils.ApiUrl}/recipients/${this.formData.id}`,
					data: this.formData,
				}).then(res => {
					uni.navigateBack();
				});
			},
			smart() {
				console.log(this.autoAddressText)
				this.text(this.autoAddressText)
			},
			text(autoAddressText) {

				if (!autoAddressText) {
					return
				}
				//this.textAdd = this.smartParse(autoAddressText); //识别到的地址对象

				var _self = this;

				const [result] = AddressParse.parse(autoAddressText)
				console.log(result)

				_self.$set(_self.formData, "contact", result.name)
				_self.$set(_self.formData, "phone", result.mobile)
				_self.$set(_self.formData, "district", result.province + result.city + result.area)

				_self.$set(_self.formData, "address", result.details)


			},

			getArea() {
				this.AllRegion = Region;
				console.log(this.AllRegion)
				this.citys = [];
				this.provinces = [];
				this.areas = [];
				let fristProvince = this.AllRegion[0];
				let firstCity = fristProvince.citys;
				let firstArea = firstCity[0].areas;
				for (let item of this.AllRegion) {
					this.provinces.push(item.province);

				}
				for (let item of firstCity) {
					this.citys.push(item.city);
				}

				for (let item of firstArea) {
					this.areas.push(item.area);
				}

				this.columns = [this.provinces, this.citys, this.areas]


				console.log(this.columns)
			},
			cityConfirm(e) {
				console.log(e)
				const {
					indexs,
					value
				} = e
				this.$set(this.formData, "district", value.join(""))
				this.showCityPicker = false;
			},
			changeHandler(e) {
				console.log(e)
				const {
					columnIndex,
					index,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.cityPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					let province = this.provinces[index];
					console.log(province)
					let tmps = this.AllRegion.filter(x => {
						return x.province == province
					});

					console.log(tmps)
					this.citys = [];
					this.areas = [];
					let cIdx = 0;
					if (tmps.length > 0) {
						for (let c of tmps[0].citys) {
							this.citys.push(c.city)
							if (cIdx == 0) {
								for (let a of c.areas) {
									this.areas.push(a.area)
								}
							}
							cIdx++;
						}
					}

					picker.setColumnValues(1, this.citys)
					picker.setColumnValues(2, this.areas)
					this.loading = false;
				} else if (columnIndex === 1) {
					this.loading = true
					let pIndex = indexs[0]
					let cIndex = indexs[1]
					let province = this.provinces[pIndex];
					console.log("province=", province)
					let city = this.citys[cIndex];
					console.log("city=", city)
					let tmps = this.AllRegion.filter(x => {
						return x.province == province
					});

					console.log(tmps)
					//	this.citys = [];
					this.areas = [];

					if (tmps.length > 0) {
						let tmpc = tmps[0].citys.filter(x => {
							return x.city == city
						})
						console.log("tmpc==", tmpc)
						for (let c of tmpc[0].areas) {
							this.areas.push(c.area)
						}
					}
					console.log("this.areas=", this.areas)
					picker.setColumnValues(2, this.areas)
					this.loading = false;

				}
			},
			setFlag(name) {
				this.$set(this.formData, 'name', name)
			},
			getWxAddress() {
				let _that = this;
				wx.chooseAddress({
					success(res) {

						console.log(res);
						if (res.userName) {
							_that.$set(_that.formData,
								'contact',
								res.userName)
						}
						if (res.telNumber) {
							_that.$set(_that.formData,
								'phone', res.telNumber)
						}
						if (res.provinceName && res.cityName && res.countyName) {
							_that.$set(_that.formData,
								'district', res.provinceName + res.cityName + res.countyName)
						}


						if (res.detailInfo) {
							_that.$set(_that.formData,
								'address', res.detailInfo)
						}
					}
				})
			},
			submit() {


			}
		},
	};
</script>

<style scoped lang="scss">
	.flag {
		border: 1px solid #f2f2f2;
		padding: 5px;
		margin: 2px;
		border-radius: 5px;
	}

	.active {
		border: 1px solid #ff0101;
		color: #ff0101;
	}

	.ml-31 {
		margin-left: 54.07rpx;
	}

	.ml-33 {
		margin-left: 57.56rpx;
	}

	.ml-5 {
		margin-left: 8.72rpx;
	}

	.page {
		padding-bottom: 598.26rpx;
		background-color: #f6f6f6;
		width: 100%;

		height: 100%;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.section {
			margin: 0 17.44rpx;
			padding: 0 13.95rpx 57.56rpx 27.91rpx;
			background-color: #ffffff;
			border-radius: 8.72rpx;

			.group {
				padding-bottom: 41.86rpx;

				.group_2 {
					padding: 41.86rpx 13.95rpx 24.42rpx;
					border-bottom: solid 1.74rpx #f2f2f2;

					.text {
						line-height: 22.59rpx;
					}
				}

				.group_3 {
					padding: 17.44rpx 10.47rpx 24.42rpx;
					border-bottom: solid 1.74rpx #f2f2f2;

					.text_2 {
						line-height: 22.47rpx;
					}

					.text_3 {
						line-height: 18.54rpx;
					}
				}

				.font {
					font-size: 28.42rpx;
					font-family: SourceHanSansCN;
					line-height: 22.64rpx;
					color: #888888;
				}

				.font_2 {
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					line-height: 22.64rpx;
					color: #000000;
				}

				.group_4 {
					padding: 20.93rpx 13.95rpx;
					border-bottom: solid 1.74rpx #f2f2f2;

					.text_4 {
						line-height: 21.91rpx;
					}

					.text_5 {
						line-height: 22.73rpx;
					}

					.text_6 {
						line-height: 22.53rpx;
					}

					.text_7 {
						line-height: 22.52rpx;
					}
				}

				.group_5 {
					margin-top: 13.95rpx;
					padding-left: 13.95rpx;
					padding-right: 8.72rpx;

					.text_8 {
						margin-top: 6.98rpx;
						line-height: 22.57rpx;
					}

					.section_2 {
						padding: 0rpx 13.95rpx;

						height: 172.67rpx;

						.text_9 {
							line-height: 23.2rpx;
						}

						.text-wrapper {
							padding: 13.95rpx 0;
							background-color: #00baad;
							border-radius: 26.16rpx;
							width: 153.49rpx;

							.text_10 {
								color: #ffffff;
							}
						}
					}
				}

				.group_6 {
					margin-top: 15.7rpx;
					padding: 0 125.58rpx;

					.image_2 {
						width: 34.88rpx;
						height: 34.88rpx;
					}

					.text_11 {
						color: #51c332;
						line-height: 19.43rpx;
					}
				}

				.group_7 {
					margin-top: 29.65rpx;
					padding: 0 118.6rpx;

					.text_12 {
						color: #000000;
					}

					.section_3 {
						background-color: #cccccc;
						width: 27.91rpx;
						height: 27.91rpx;
					}
				}

				.font_3 {
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					line-height: 19.33rpx;
				}
			}


		}
	}

	.text-wrapper_2 {
		margin-top: 120rpx;
		padding: 20.44rpx 10.47rpx;
		background-color: #ff0101;
		width: 265.12rpx;
		border-radius: 33.14rpx;
		width: 331.4rpx;
		font-size: 28rpx;
		padding: 5rpx;
		line-height: 1.5em;

	}
</style>